<template>
    <div class="letterdetail">
        <div class="detailbody">
            <letterdetail-item 
                v-for="(item,index) of list" 
                :key="item.id" 
                :sender="item.sender ==1?wo:ta" 
                :item="item"
                :itemIndex="index"
                @imgClick="handleFujianClick"
            ></letterdetail-item>
        </div>
        <div class="letterdetail-bottom">
            <flexbox :gutter="0" style="height:100%">
                <flexbox-item :span="1/5" style="height:100%">
                    <div class="bottom-flex bottom-back">
                        <svg class="icon cell_icon" aria-hidden="true" style="width:.5rem;height:.5rem;margin-top:.05rem;">
                            <use xlink:href="#icon-fanhui"></use>
                        </svg>
                        <router-link tag="div" to="-1" class="bottom-back__tips">返回</router-link>
                    </div>
                </flexbox-item>
                <flexbox-item style="height:100%">
                    <div class="bottom-flex bottom-reply">
                        回复
                    </div>
                </flexbox-item>
            </flexbox>
        </div>

        <div v-transfer-dom v-if="fujianShowData != null">
            <previewer :list="fujianShowData" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
        </div>
    </div>
</template>

<script>
import letterdetailItem from './components/item'
import { Flexbox, FlexboxItem, Previewer, TransferDom,Swiper  } from 'vux'
export default {
    name: 'LetterDetail',
    directives: {
        TransferDom
    },
    components: {
        letterdetailItem,
        Flexbox, 
        FlexboxItem,
        Previewer, 
        TransferDom,
        Swiper 
    },
    data () {
        return {
            ta:{
                imgurl: 'https://ss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/e1fe9925bc315c6058597d4181b1cb134854774b.jpg',
                name: 'inory'
            },
            wo: { //测试数据 以后直接从state里取
                imgurl: 'http://thirdwx.qlogo.cn/mmopen/qztxpSicM8xQaZYtiaJqsWhRwAWUribnTwVwVDUr0Pw5gb6OKpxl6l32YrDibcTiavjhPpQHY6pF7xh3fpYK3BLXOYOhvFIOiatUrv/0',
                name: '我'
            },
            list: [
                {
                    id: '001',
                    content: '内容',
                    time: '2018-08-10',
                    sender: 1, //1是我 2是对方
                    fujian:[{
                        msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwu9ze86j20m80b40t2.jpg',
                        src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwu9ze86j20m80b40t2.jpg',
                        w: 800,
                        h: 400
                    },
                    {
                        msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',
                        src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',
                        w: 1200,
                        h: 900
                    }, {
                        msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwwcynw2j20p00b4js9.jpg',
                        src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwwcynw2j20p00b4js9.jpg'
                    }]
                },
                {
                    id: '002',
                    content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
                    time: '2018-08-20',
                    sender: 2,
                    fujian:[{
                        msrc: 'https://ss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/e1fe9925bc315c6058597d4181b1cb134854774b.jpg',
                        src: 'https://ss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/e1fe9925bc315c6058597d4181b1cb134854774b.jpg',
                        
                    },
                    {
                        msrc: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3378856654,3205237290&fm=58&bpow=704&bpoh=1057',
                        src: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3378856654,3205237290&fm=58&bpow=704&bpoh=1057',
                        
                    }]
                }
            ],
            fujianShowData: null,
            // fujianShowData: [{
            //             msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwu9ze86j20m80b40t2.jpg',
            //             src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwu9ze86j20m80b40t2.jpg',
            //             w: 800,
            //             h: 400
            //         },
            //         {
            //             msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',
            //             src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',
            //             w: 1200,
            //             h: 900
            //         }, {
            //             msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwwcynw2j20p00b4js9.jpg',
            //             src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwwcynw2j20p00b4js9.jpg'
            //         },{
            //             msrc: 'https://ss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/e1fe9925bc315c6058597d4181b1cb134854774b.jpg',
            //             src: 'https://ss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/e1fe9925bc315c6058597d4181b1cb134854774b.jpg',
                        
            //         },
            //         {
            //             msrc: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3378856654,3205237290&fm=58&bpow=704&bpoh=1057',
            //             src: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3378856654,3205237290&fm=58&bpow=704&bpoh=1057',
                        
            //         }],
            options: {
                getThumbBoundsFn (item,index) {
                // find thumbnail element
                console.log(document.querySelectorAll('.item')[item])
                let thumbnails = document.querySelectorAll('.item')[item]

                let thumbnail = thumbnails.querySelectorAll('.fujian-img_item')[index]
                
                // get window scroll Y
                let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
                // optionally get horizontal scroll
                // get position of element relative to viewport
                let rect = thumbnail.getBoundingClientRect()
                // w = width
                return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
                // Good guide on how to get element coordinates:
                // http://javascript.info/tutorial/coordinates
                }
            }
        }
    },
    methods: {
        handleFujianClick (itemId,imgId) {
            let itemIndex = itemId
            this.fujianShowData = this.list[itemId].fujian
            setTimeout(()=>{
                this.$refs.previewer.show(itemId,imgId)
            },100)
            
        },
        logIndexChange (arg) {
            console.log(arg)
        }
    }
}
</script>

<style lang="stylus" scoped>
.letterdetail
    .detailbody
        padding-bottom: 1.5rem
    .letterdetail-bottom
        width: 100%
        height: 1rem
        position: fixed
        bottom: 0
        border-top: 1px solid #f0f0f0
        box-shadow: 0 0 2px #f0f0f0
        .bottom-flex
            height: 100%
            text-align: center
        .bottom-back
            background-color: #ffffff
            .bottom-back__tips
                margin-top: .05rem
        .bottom-reply
            line-height: 1rem
            font-size: .42rem
            color: #ffffff
            background-color: #ec9315
</style>
